<template>
	<view class="root">
		<button @click="openPopup">打开上门时间弹框</button>
		<uni-popup
			class="popup"
			ref="popup" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			>
			<view class="container">
				<view class="header">
					<view class="left">
						上门时间
					</view>
					<view class="right">
						x
					</view>
				</view>
				<view class="body">
					<picker-view indicator-style="height: 50px"  class="picker-view">
						<picker-view-column class="column">
							<view class="item" v-for="(item,index) in toDoorDate" :key="index">{{item}}</view>
						</picker-view-column>
						<picker-view-column class="column">
							<view class="item"  :key="-1">立刻上门</view>
							<view class="item" v-for="i in (toDoorTime.length - 1)" :key="i">{{toDoorTime[i-1]}}:00-{{toDoorTime[i]}}:00</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="bottom">
					<button class="confirm-button">确定</button>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const popup = ref()
	
	const toDoorDate = ref(['今天', '明天','后天'])
	const toDoorTime = ref([7,9,11,13,15,17,19,21])
	
	
	function openPopup() {
		popup.value.open('bottom')
	}
	
</script>

<style lang="scss" scoped>
	.root {
		
		.popup {
			.container {
				position: relative;
				padding: 30rpx 30rpx 0 30rpx;
				background-color: white;
				border-radius: 50rpx;
				height: 700rpx;
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 700;
				}
				.body {
					height: 310rpx;
					.picker-view {
						height: 300rpx;
						margin: 0 auto;
						.column {
							.item {
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						
					}
				}
				
				.bottom {
					position: absolute;
					bottom: 20%;
					left: 10%;
					.confirm-button {
						width: 600rpx;
						background-color:#2ec076;
						color: white;
					}
				}
				
			}
		}
	}
</style>